<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta content="telephone=no" name="format-detection" />
  <script src="js/rem.js"></script>
  <link href="css/normalize.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.min.css" rel="stylesheet" type="text/css" />
  <title>demo</title>
<style>
html{
  max-width: 375px;
}
.wrapper {
  margin: 0 auto;
  max-width: 640px;
}
.content {
  position: absolute; 
  width:100%;
  height:100%;
  background:url(res/background-dog.jpg) no-repeat center center;
  background-size: 100% 100%;
  background-attachment:fixed;
}

ul>li {
  list-style: none;
}

ul>li>span {
  font-size: 24px;
}

.choice {
  background-color: #AED6F1;
}

</style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
      
      <div id="page_start" style="display: none; text-align: center;position: fixed; margin:0 auto; width:100%; ">
        <div>
          <p id="activity_title_text" style="color:black;font-size: 36px;"></p>
        </div>
        <div id="btn_start_test" >
          <button style="background-color: #3498DB; border-style: solid; border-color:black;border-radius: 5px;padding: 0.2rem 0.4rem;">
            <span style="font-size: 24px;color:#FDFEFE">开始答题</span>
          </button>
        </div>
        <div style="width:80%; background-color: teal; margin:10px auto;  border-radius: 5px;  ">
          <div style="font-size: 16px; color:#FDFEFE; padding: 0.2rem;">
            <p>活动规则</p>
            <p id="activity_rule"></p>
          </div>
        </div>
      </div>

      <div id="page_question" class="dialog" style=" display: none; width:100%; position: fixed; top:2%; left:0; background-color:#FDFEFE; margin:0 auto;border-radius: 6px 6px 6px 6px ;">
        <div style="height:1.5rem;width:100%;background-color: #3498DB; border-radius: 6px 6px 0 0;">
          <span style="font-size: 24px; line-height: 1.5rem;margin-left: 0.2rem;">第<span id="question_order" style="font-size: 24px; color:white;font-style: italic;padding-right: 0.2rem;"></span>题</span>
        </div>
        <div>
          <p id="question_title" style="margin: 6px 0 0 0.2rem;font-size: 28px;">测测试题目？</p>
          <hr/>
        </div>
        <div style="height:8rem; overflow:auto;">
          <ul id="answers" style="padding-left: 0.2rem;margin-right: 0.2rem; margin-top:0;margin-bottom: 2rem;">
            <li><span>1.测试测试答案测试答案测试答案测试答案答案</span></li>
            <hr/>
            <li><span>2.测试案</span></li>
            <hr/>
            <li><span>3.测试案</span></li>
            <hr/>
            <li><span>4.测案</span></li>
            <hr/>
          </ul>
        </div>
        <div style=" text-align: center; width:100%;background-color: #2980B9; border-radius: 0 0 6px 6px; padding:0.2rem 0;">
          <button id="btn_prev_question" style=" line-height: 40px; background-color: #3498DB; border-style: solid; border-color:black;border-radius: 5px;"><span style="font-size: 24px;">上一道题</span></button>
          <button id="btn_next_question" style=" line-height: 40px; background-color: #3498DB; border-style: solid; border-color:black;border-radius: 5px;"><span style="font-size: 24px;">下一道题</span></button>
        </div>
      </div>

      <div id="page_result" class="dialog" style=" display: none; position: fixed; top:0.2rem;  margin:0 0.4rem;border-radius: 6px 6px 6px 6px ;">
        <div style="position: relative; height: 60px;">
          <img src="res/panda.normal.png" style="position: absolute; top:0.2rem; height: 60px;  left:50%; transform: translateX(-50%);"  />
        </div>
        <div style="text-align: center;  height:1.5rem;width:100%;background-color: #3498DB; border-radius: 6px 6px 0 0;">
          <span style="font-size: 24px; line-height: 1.5rem;">金榜题名</span>
        </div>
        <div style="background-color:#FDFEFE;padding-bottom: 4px;">
          <p id="txt_test_result" style="margin: 0 6px 6px 6px;font-size: 28px;"></p>
          <p style="margin: 0 6px 0 6px;font-size: 28px;">分享朋友圈，让更多的朋友来答题！</p>
        </div>
        <div style=" text-align: center; width:100%;background-color: #2980B9; border-radius: 0 0 6px 6px; padding:0.2rem 0;">
          <button id="btn_try_agagin" style=" line-height: 40px;  background-color: #3498DB; border-style: solid; border-color:black;border-radius: 5px;"><span style="font-size: 24px;">再来一次</span></button>
          <button id="btn_share_result" style=" line-height: 40px; background-color: #3498DB; border-style: solid; border-color:black;border-radius: 5px;"><span style="font-size: 24px;">微信分享</span></button>
        </div>
      </div>
    </div>
  </div>
  
</body>
</html>
<script src='js/fastclick.js'></script>
<script src="js/zepto.min.js"></script>
<script>

  var current_question = 0;

  var total_questions = -1;

  var questions = [];

  var user_choices = [];
  
  var right_count = 0;

  var wrong_count = 0;

  // fast click
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
    }, false);
  }

  function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)
    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)
        if (typeof callback === 'function') callback()
    }
    node.addEventListener('animationend', handleAnimationEnd)
  }

  function getdatafromStr(str, name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = str.substr(str.indexOf("\?") + 1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  }

  function show_question(questionNo) {
    var q = questions[questionNo];
    $('#question_title').html(q.questionName);
    var answers = '';
    $.each(q.questionAnswer, function(idx, item) {
      //console.log(item);
      //console.log(q);
      var item = '<li><span data-question-id=' + q.questionId + ' data-flag="' + item.flag + '" data-answer-id="' + item.id + '">' + (idx+1) + '.' + item.answer_content + '</span></li><hr/>';
      answers += item;
    });
    //console.log(answers);
    $('#answers').html(answers);
    $('#question_order').html(questionNo+1);
  }

  (function() {

    setTimeout(function() {
      animateCSS('#page_start', 'flipInX');
    }, 0);

    // init
    var param = getdatafromStr(window.location.href, "a");
    $.ajax({
      type: 'GET',
      url: 'new_question.json', 
      dataType: 'json', 
      data: {}, 
      cache: false, 
      success: function (obj) {
        console.log(obj);
        $('#activity_title_text').html(obj.data.activityName);
        $('#activity_rule').html(obj.data.activityRule);
        
        $('#page_start').show().siblings().hide();
        //$('#page_question').show().siblings().hide();
        
        questions = obj.data.questions;
        total_questions = questions.length;

      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        //mobile_submit=false;	
      }
    });

    // 点击答案
    $('#answers').on('click', 'li', function(e) {
      //console.log(e);
      $(this).addClass('choice').siblings().removeClass('choice');
    })

    // 开始答题
    $('#btn_start_test').click(function(e) {
      animateCSS('#page_start', 'fadeOutLeft', function() {
        $('#page_start').hide();
        //animateCSS('#page_question', 'fadeInRight');
        $('#page_question').show();
      });
      current_question = 0;
      $('#question_title').html(questions[current_question].questionName);
      var answers = '';
      $.each(questions[current_question].questionAnswer, function(idx, item) {
        //console.log(item);
        //console.log(questions[current_question]);
        var item = '<li><span data-question-id=' + questions[current_question].questionId + ' data-flag="' + item.flag + '" data-answer-id="' + item.id + '">' + (idx+1) + '.' + item.answer_content + '</span></li><hr/>';
        answers += item;
      });
      //console.log(answers);
      $('#answers').html(answers);
      $('#question_order').html(current_question+1);
      // 如果只有一道题
      if (total_questions == 1) {
        $('#btn_next_question span').text('结束考试');
      }
    });

    // 下一题
    $('#btn_next_question').click(function(e) {
      e.preventDefault();

      var selected = $('ul>li').hasClass('choice');
      if (!selected) {
        animateCSS('#page_question', 'shake');
        return false;
      }

      var choiceElm = $('ul>li[class="choice"]>span');
      var questionId = $(choiceElm).attr('data-question-id');
      var answerId = $(choiceElm).attr('data-answer-id');
      var flag = $(choiceElm).attr('data-flag');
      var choice = {
        questionId: questionId,
        answerId: answerId,
        flag: flag
      };
      if (flag == '1') {
        right_count ++;
      }
      else {
        wrong_count ++;
      }
      //console.log(choice);
      user_choices.push(choice);

      current_question ++;

      

      // 排除0道题的情况， 一个活动至少有一道题
      if (current_question == total_questions) {
        // 如果只有一道题， 跳转到结果界面
        var msg = '感谢您的参与，您本轮答对了' + right_count + '道题。';
        if (right_count == total_questions) {
          msg += '学霸，我好崇拜你~'
        }
        else if (right_count == 0) {
          msg += '小伙子，继续努力！要不要再来一轮？';
        }
        else {
          msg += '不服再战？';
        }
        $('#txt_test_result').text(msg);
        $('#page_result').show().siblings().hide();
      }
      else if (current_question == (total_questions -1)) {
        // 如果有两道题
        $('#btn_next_question span').text('结束考试');
        show_question(current_question);
        animateCSS('#page_question', 'fadeInRight');
        
      }
      else if (current_question < total_questions) {
        // 如果当前不是最后一道题
        show_question(current_question);
        animateCSS('#page_question', 'fadeInRight');
      }
    });

    // 上一题
    $('#btn_prev_question').on('click', function(e) {
      e.preventDefault();
      if (current_question == 0) {
        animateCSS('#page_question', 'shake');
        return false;
      }
      current_question --;
      user_choices.pop();
      $('#btn_next_question span').text('下一道题');
      show_question(current_question);
    });


    // 提交问卷
    $('#btn_submit_question').click(function(e) {
      e.preventDefault();
      $('#page_question').hide();
      $('#page_result').show();
    });

    // 不服再战
    $('#btn_try_agagin').click(function(e){
      window.location.reload();
    });

  })();

</script>